import { Select, Space } from 'antd';
import router from 'next/dist/client/router';
import dynamic from 'next/dynamic';
import Image from 'next/image';
import { useCallback } from 'react';
import styled from 'styled-components';
import i18next from '../i18n';
import useNotice from '../libs/hooks/useNotice';
import useSaLogging, { eventMap } from '../libs/hooks/useSaLogging';
import useUserInfo from '../libs/hooks/useUserInfo';
import { boldStyles } from '../libs/styles/common';

//const languages = ['English', 'Korean'];
//const i18nOptions: { [key: string]: string } = { English: 'en', Korean: 'kr' };
const languages = ['English'];
const i18nOptions: { [key: string]: string } = { English: 'en' };

const Notification = dynamic(() => import('../components/notice/NotificationBox'));
function Header() {
  const divider = <div style={{ color: '#e9e9e9' }}>|</div>;
  const { info, isAdmin, isNotAuthorized, userGroupRoles } = useUserInfo();
  const { language, setLanguage } = useNotice();
  const { saEvent } = useSaLogging();

  const routeHome = () => {
    if (!isNotAuthorized) {
      router.push('/');
      saEvent(eventMap.CLICK_LOGO);
    }
  };
  const routeMyInfo = () => router.push('/myInfo');

  const routePrevPortal = () => {
    //window.open('https://dir-beta.samsungdiroute.net');
    //window.open('https://dir.bigdata.samsung.com.cn');
    window.open('https://bigdata.samsung.com.cn/');
    saEvent(eventMap.CLICK_PREV_LOGO);
  };

  const routeAdmin = () => router.push('/admin');
  const routeIMEI = () => router.push('/imei');

  const onChangeLanguage = useCallback((value: string) => {
    setLanguage((prev: any) => (prev ? 0 : 1));
    i18next.changeLanguage(i18nOptions[value]);
    saEvent(eventMap.CHANGE_LANGUAGE, [{ key: 'language', value: value }]);
  }, []);

  return (
    <Div>
      <HomeButton
        className="logo"
        onClick={routeHome}
        authrozied={isNotAuthorized ? 0 : 1}
      >
        <Image src="/images/logob.svg" alt="/images/logob.svg" width={60} height={30} />
      </HomeButton>
      <Space style={{ float: 'right', marginTop: 8 }}>
        {!isNotAuthorized && <Notification />}
        {
          userGroupRoles!=undefined  ?
            <>
              {divider}
              {/* <div onClick={routeIMEI}> IMEI</div> */}
              <div onClick={routeIMEI}> Device Location</div>
            </>
            : ''
        }
        {divider}
        <div onClick={routeMyInfo}>{`${info?.username} (${info?.ugroup})`}</div>
        {isAdmin && (
          <>
            {divider}
            <div onClick={routeAdmin}> Admin</div>
          </>
        )}
        {divider}
        <Select
          defaultValue={languages[language]}
          bordered={false}
          onChange={onChangeLanguage}
        >
          {languages.map(value => (
            <Select.Option key={value} value={value}>
              <div>
                <img
                  alt=""
                  width="25"
                  src={`/images/${value === 'English' ? 'en' : 'kr'}.svg`}
                  style={{ marginRight: 5 }}
                />
                {value === 'English' ? 'EN' : 'KR'}
              </div>
            </Select.Option>
          ))}
        </Select>
        {divider}
        <Image
          onClick={routePrevPortal}
          title="Switch to BigData Portal CN"
          src="/images/bdp_portal_logo.png"
          alt="/images/bdp_portal_logo.png"
          width={81}
          height={30}
        />
      </Space>
    </Div>
  );
}
export default Header;

const Div = styled.div`
  padding: 5px 40px;
  font-size: 13px;
  color: #515151;
  font-weight: ${boldStyles.semiBold};
  cursor: pointer;
`;

const HomeButton = styled.div<{ authrozied: number }>`
  display: inline-block;
  margin-top: 3px;
  cursor: ${props => (props.authrozied === 1 ? 'pointer' : 'default')};
`;
